require.config({
    baseUrl: '../js/lib', // 基础路径
    paths: {
        jquery: 'jquery',
        axios: 'axios',
        cookie: 'cookie'
    },
    shim: {
    }
});

require(['cookie', 'axios', 'jquery'], function (cookie, axios, $) {
    $(function () {
        let shop = cookie.get('shop');
        if (shop.length == 0) {
            $('.product .top').addClass('display');
            $('.shop-btn').addClass('display');
            $('.empty').removeClass('display');
            return;
        }
        $('.product .top').removeClass('display');
        $('.shop-btn').removeClass('display');
        $('.empty').addClass('display');
        shop = JSON.parse(shop);
        let idList = shop.map(el => el.id).join(',');

        axios.get('../product/car', { params: { idList } }).then(res => {
            let data = res.data;
            let product_sum = 0;
            let sum_price = 0;
            let tempstring = '';
            data.forEach(el => {
                let picture = JSON.parse(el.picture);
                shop.forEach(elm => {
                    if (elm.id === el.id) {
                        product_sum += elm.num;
                        tempstring += `
            <ul class='clear_fix product_li' data-id='${elm.id}'>
                <li>
                    <input type="checkbox" name="check" class="check">
                </li>
                <li>
                    <img src="../${picture[0].src}" alt="">
                </li>
                <li class="type">
                ${el.title} 类型:<i>${elm.type}</i>颜色:<b>${elm.color}</b>
                </li>
                <li class='unit-price'>
                ${(parseInt(elm.price))}元
                </li>
                <li>
                    <input type='number' value='${elm.num}' class='inp-num'>  
                </li>
                <li class='suntotal'>
                ${parseInt(elm.price) * elm.num}元
                </li>
                <li class='delete'>
                    x
                </li>
            </ul>`
                    }
                })
            })
            $('.product-info').html(tempstring);
            $('.box-l .content i').html(product_sum)
            $('#all').on('click', function () {
                if ($('#all').prop('checked') === true) {

                    $('.product_li .check').prop('checked', true);
                    $('.product_li').addClass('checked-li');
                    $('.content b').html($('.content i').html())
                } else {
                    $('.product_li .check').prop('checked', false);
                    $('.product_li').removeClass('checked-li');
                    $('.content b').html(0);
                }
                sum_price = 0;
                $('.checked-li .suntotal').map(function () {
                    sum_price += parseInt($(this).text());
                })
                $('.sum span').html(sum_price);
            })
            $('.check').on('click', function () {
                let a2 = parseInt($(this).closest('.product_li').find('.inp-num').val());
                let a1 = parseInt($('.content b').html())
                let li = $(this).closest('.product_li');
                if ($(this).prop('checked') === true) {
                    li.addClass('checked-li');
                    $('.content b').html(a1 + a2);
                } else {
                    li.removeClass('checked-li');

                    $('.content b').html(a1 - a2);
                }
                sum_price = 0;
                $('.checked-li .suntotal').map(function () {
                    sum_price += parseInt($(this).text());
                })
                $('.sum span').html(sum_price);
            })
            $('.inp-num').on('change', function () {
                let li = $(this).closest('.product_li');
                let price = parseInt(li.find('.unit-price').html());
                li.find('.suntotal').html(`${$(this).val() * price}元`);
                sum_price = 0;
                $('.checked-li .suntotal').map(function () {
                    sum_price += parseInt($(this).text());
                })
                $('.sum span').html(sum_price);
                let id = parseInt(li.attr('data-id'));
                let num = parseInt($(this).val());
                let type = li.find('.type i').html();
                let color = li.find('.type b').html();
                addItem(id, num, type, (price + '元'), color);
                let shop_2 = cookie.get('shop');
                shop_2 = JSON.parse(shop_2);
                let content_b = 0;
                shop_2.forEach(el => {
                    content_b += el.num;
                })
                $('.content i').html(content_b);
                let sum_input = 0;
                $('.checked-li').map(function () {
                    if ($(this).hasClass('checked-li')) {
                        sum_input += parseInt($(this).find('.inp-num').val());
                    }
                })
                $('.content b').html(sum_input);
            })
            $('.delete').on('click', function () {
                let li = $(this).closest('.product_li');
                let id = li.attr('data-id');
                let type = li.find('.type i').html();
                let color = li.find('.type b').html();
                let num = parseInt(li.find('.inp-num').val());
                let price = parseInt(li.find('.suntotal').html());
                let sum = parseInt($('.box-r .sum span').html());
                let content = parseInt($('.content i').html());
                let check_content = parseInt($('.content b').html());
                $('.content i').html(content - num);
                if (li.hasClass('checked-li')) {
                    $('.box-r .sum span').html(sum - price);
                    $('.content b').html(check_content - num);
                }
                li.remove();
                removeItem(id, type, color);
                let shop_remove = JSON.parse(cookie.get('shop'));
                console.log(shop_remove);
                if (shop_remove.length == 0) {
                    console.log(1);
                    $('.product .top').addClass('display');
                    $('.shop-btn').addClass('display');
                    $('.empty').removeClass('display');
                }
            })
        }).catch(err => {
            console.log(err);
        });
    })
    function addItem(id, num, type, price, color) {
        let shop = cookie.get('shop');
        let product = {
            id,
            num,
            type,
            price,
            color
        };
        if (shop) {
            shop = JSON.parse(shop);
            if (shop.some(el => el.id === id && el.type === type && el.color === color)) {
                let _index = shop.findIndex(elm => elm.id == id && elm.type === type && elm.color === color);
                let count = parseInt(shop[_index].num);
                count = parseInt(num);
                shop[_index].num = count;
            } else {
                console.log(2);
                shop.push(product);
            }
        } else {
            shop = [];
            shop.push(product);
        }
        cookie.set('shop', JSON.stringify(shop), 3);
    }


    function removeItem(id, type, color) {
        let shop = cookie.get('shop');
        console.log(id, type, color);
        shop = JSON.parse(shop);
        if (shop.some(el => el.id == id && el.type == type && el.color == color)) {
            let _index = shop.findIndex(elm => elm.id == id && elm.type == type && elm.color == color);
            shop.splice(_index, 1);
            console.log(shop);
        }
        console.log(shop);
        cookie.set('shop', JSON.stringify(shop), 3);
    }
})

